<template>
  <div class="body">
    <el-form :model="searchForm" class="search-form" lableAlign="left">
      <el-row :gutter="5">
        <el-col :span="5">
          <el-form-item label="标题" prop="titleFuzzy">
            <el-input
              placeholder="输入标题"
              v-model="searchForm.titleFuzzy"
              @keyup.enter="loadDataList"
              ><template #prefix
                ><span class="iconfont icon-title"></span></template
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item>
            <el-button
              plain
              color="#409eff"
              @click="loadDataList()"
              size="large"
              >搜索</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
  <Table
    :columns="columns"
    :showPagination="false"
    :dataSource="tableData"
    :fetch="loadDataList"
    :options="tableOptinos"
  >
    <!-- 封面 -->
    <template #cover="{ row }">
      <Cover :cover="row.cover"></Cover>
    </template>
    <!-- 文章信息 -->
    <template #blogInfo="{ row }">
      <div>标题：{{ row.title }}</div>
      <div>
        类型：{{ row.blogType == 0 ? "博客" : "专题" }}
        <el-divider direction="vertical" /><span>{{
          row.blogType == 0 ? "分类" : "专题"
        }}</span
        >: {{ row.categoryName || "---" }}
      </div>
      <div>作者：{{ row.nickName }}</div>
    </template>
    <!-- 类型 -->
    <!-- <template #typeName="{ row }">
        <div>
          类型：
          <span v-if="row.type == 0">原创</span>
          <span v-if="row.type == 1">转载</span>
        </div>
        <div v-if="row.type == 1">转载地址：{{ row.reprintUrl }}</div>
      </template> -->
    <!-- 状态 -->
    <template #statusName="{ row }">
      <span v-if="row.status == 1" style="color: green">{{
        row.statusName
      }}</span>
      <span v-else style="color: red">{{ row.statusName }}</span>
    </template>
    <!-- 时间 -->
    <template #time="{ row }">
      <div>创建时间：{{ row.createTime }}</div>
      <div>更新时间：{{ row.lastUpdateTime }}</div>
    </template>

    <template #operation="{ row }">
      <template v-if="row.userId == userInfo.userId || userInfo.roleType == 1">
        <a
          href="javascript:void(0)"
          class="a-link"
          @click="reductionBlog(row)"
          v-if="userInfo.roleType == 1"
          >恢复</a
        >
        <span v-else>---</span>
        <el-divider direction="vertical" />
        <a
          href="javascript:void(0)"
          class="a-link"
          @click="delBlog(row)"
          v-if="userInfo.roleType == 1"
          >删除</a
        >
        <span v-else>---</span>
      </template>
      <template v-else>---</template>
    </template>
  </Table>
</template>

<script setup>
import { getCurrentInstance, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import VueCookies from "vue-cookies";
const router = useRouter();
const { proxy } = getCurrentInstance();

const userInfo = ref(VueCookies.get("userInfo") || {});

const api = {
  loadDataList: "/blog/loadRecoveryList",
  delBlog: "/blog/delBlog",
  reductionBlog: "/blog/reductionBlog",
};
const tableData = ref({});
const tableOptinos = reactive({
  extHeight: 50,
  stripe: true,
});

//列表
const columns = [
  {
    label: "封面",
    prop: "cover",
    width: 100,
    scopedSlots: "cover",
  },
  {
    label: "文章信息",
    prop: "categoryName",
    scopedSlots: "blogInfo",
  },
  {
    label: "编辑器",
    prop: "editorTypeName",
    width: 100,
  },
  {
    label: "类型",
    prop: "statusName",
    scopedSlots: "statusName",
  },
  {
    label: "评论",
    prop: "allowCommentTypeName",
    width: 75,
  },
  {
    label: "时间",
    prop: "time",
    width: 250,
    scopedSlots: "time",
  },
  {
    label: "操作",
    prop: "operation",
    width: 150,
    scopedSlots: "operation",
  },
];

const searchForm = reactive({});
const loadDataList = async () => {
  let params = {
    pageNo: tableData.pageNo,
    pageSize: tableData.pageSize,
  };
  Object.assign(params, searchForm);
  let result = await proxy.Request({
    url: api.loadDataList,
    params: params,
  });
  if (!result) {
    return;
  }
  tableData.value = result.data;
};
//删除
const delBlog = (data) => {
  proxy.Confirm(
    `你确定要删除 <b>${data.title}</b> 吗?彻彻底底的那种?`,
    async () => {
      let result = await proxy.Request({
        url: api.delBlog,
        params: {
          blogId: data.blogId,
        },
      });
      if (!result) {
        return;
      }
      proxy.Message.success("删除成功");
      loadDataList();
    }
  );
};
// 复活
const reductionBlog = (data) => {
  proxy.Confirm(`你确定要让 <b>${data.title}</b> 打赢复活赛吗?`, async () => {
    let result = await proxy.Request({
      url: api.reductionBlog,
      params: {
        blogId: data.blogId,
      },
    });
    if (!result) {
      return;
    }
    proxy.Message.success("打赢成功");
    loadDataList();
  });
};
</script>

<style scoped lang="scss">
</style>